1. Field of the Disclosure
The present disclosure relates to an output function division system in applications involved in screen display or output of audio or the like. Particularly, the present disclosure relates to a Web browsing system which displays a Web page on a user terminal.
2. Discussion of the Background Art
With the spread of the Internet, users can use various services via a network. Mails, browsing of home pages, search, online transaction, IP phones, video on-demand and the like are the examples thereof. These network services may be provided in various formats, but in recent years, a Web browser is mainly used as an interface to users.
Initially, a page (hereinafter, referred to as a Web page) which is browsed to be acquired from a Web server by the Web browser was only to display light-weighted, static documents described by only HTML (Hyper Text Markup Language). However, in recent years, by executing Flash provided by Adobe or script language JavaScript (registered trademark) on the Web browser, a flexible, dynamic user interface has been provided. The Web page is called a Rich Internet Application. Furthermore, in HTML5 (the latest revision of HTML) of which standardization is promoted by standardization organizations of WHATWG (Web Hypertext Application Technology Working Group) and W3C (World Wide Web Consortium), advanced multimedia functions are supported, and the Rich Internet Application is expected to be developed in the future.
With the development of the Rich Internet Application, a higher processing performance is required for the Web browser. On the other hand, user terminals executing the Web browser have been diversified. In the related art, the Web page was mainly browsed by using a Web browser on a PC (Personal Computer). However, today, due to miniaturization, low power consumption, and low cost of computers, the Web browsers are installed in various forms of the user terminals. Smart phones, smart TVs, home game machines and the like are representative user terminals. Therefore, according to a place or a situation where the user is located, the user accesses the Web page by using various types of the user terminals.
The processing performance of the user terminal greatly differs depending on the shape, use, or the like thereof. Therefore, even when the same Web page is browsed, particularly, in the case where the Rich Internet Application is browsed, a large difference occurs in a quality of user experience which the user obtains by the user terminal used to access the Web page. Therefore, a Web page provider is forced to prepare multiple Web pages customized for each type of the user terminals or to provide large cost in order to provide a uniform quality of user experience regardless of the type of the user terminal.
Herein, a basic structure of a Web browser will be described. As illustrated in FIG. 1, a Web browser 97 of a user terminal transmits an HTTP request to a Web server 96 via a network or the Internet and acquires resources (indicating individual files used for displaying the Web page such as HTML files, style sheets, images and the like) necessary for displaying the Web page as an HTTP response from the Web server 96.
Herein, for the description, a simple Web browser 97 is configured to include two units of a URL entry unit 971 and a Webview display unit 972 is assumed (FIG. 2). The URL entry unit 971 receives input of a URL (Uniform Resource Locator) of a Web page which a user desires to browse. In addition, in a case where the Web page is transitioned due to link clicking or the like, the URL entry unit 971 displays the URL of the Web page of the transition destination. On the other hand, the Webview display unit 972 displays the screen of the Web page. In addition, the Webview display unit receives manipulation (mouse manipulation, touch panel manipulation, keyboard input, or the like) from the user.
FIG. 3 illustrates a flow of a basic process of the Web browser in a case where the Web browser of FIG. 2 is assumed. First, the user inputs a URL of a Web page which the user desires to browse in a URL entry unit 971 of the Web browser. Herein, as an example, the URL input by the user is assumed to be http://www.example.com/index.html. In addition, as illustrated in FIG. 4, in the Web page, three small images are arranged in the upper portion, and one enlarged image is arranged in the lower portion. Next, if the user touches the small image in the upper portion by moving the mouse cursor, the enlarged image in the lower portion is switched to the image touched with the mouse cursor.
If the Web browser 97 receives the URL from the URL entry unit 971, the Web browser transfers the URL to the request transmission unit 14. The request transmission unit 14 transmits an HTTP request to a Web server 96 (in this example, www.example.com) designated with the URL in order to acquire the resources associated with the URL.
If the Web server 96 receives the HTTP request, the Web server sends a reply with the resources indicated by the URL of the HTTP request as an HTTP response to the Web browser 97 which is the transmission source. In general, in the case of being transitioned to a new Web page, first, an HTML file is returned from the Web server 96. Herein, as an HTML file corresponding to the Web page of FIG. 4, a reply with the HTML file illustrated in FIG. 5 is sent.
If the Web browser 97 acquires the HTTP response from the Web server 96, the Web browser transfers the HTTP response to the response reception unit 15. The response reception unit 15 extracts resources from the HTTP response. Next, the response reception unit 15 stores the extracted resources in the resources storage unit 21. Herein, first, as the resources, an HTML file of FIG. 5 is obtained.
Next, the HTML analysis unit 13 analyzes the acquired HTML file or the acquired style sheet. Next, in general, a data structure (DOM tree) having an API called a DOM (Document Object Model) is constructed. A specific example of the DOM tree constructed from the HTML file of FIG. 5 is illustrated in FIG. 6. As illustrated in FIG. 6, the DOM tree basically becomes a tree structure where elements of the HTML file are used as nodes. In addition, each node is set to an attribute value according to description of the HTML file. The HTML analysis unit 13 stores the constructed DOM tree in the DOM tree storage unit 22. In addition, as a result of the analysis of the HTML file, in a case where resources which need to be additionally acquired from the Web server 96 are found, the HTML analysis unit notifies a URL of the resources to the request transmission unit 14 to request the request transmission unit to transmit an HTTP request. In the example, as the resources necessary for displaying a page, the followings are newly acquired from the Web server.
http://www.example.com/1.jpg
http://www.example.com/2.jpg
http://www.example.com/3.jpg
In addition, if the HTML file has a script and the execution condition of the script is satisfied, the HTML analysis unit 13 requests the script evaluation unit 12 to execute the script in the HTML file. At this time, the HTML analysis unit 13 transfers the script (functions and arguments to be given to the functions) which is to be executed to the script evaluation unit 12. Next, the script evaluation unit 12 executes the script with reference to the DOM tree in the DOM tree storage unit 22. In the case of updating the DOM tree according to the execution of the script, the HTML analysis unit 13 is requested to update the DOM tree. In addition, the HTML file of FIG. 5 has a setPicture function in JavaScript (registered trademark) as a script, and the execution condition thereof is “a case where the mouse touches the designated image (onmouseover event handler)”. Therefore, at this time, since the execution condition of the script is not satisfied, the HTML analysis unit 13 does not request the script evaluation unit 12 to execute the script. The operation in a case where the execution condition of the script is satisfied will be described later.
In addition, although not exemplified in this example, the Web page provider can control the screen configuration (layout) displayed on the Webview by supplying a style sheet as the resources. In a case where a description method of a style sheet and the style sheet are designated, as to how the Web browser configures the screen, CSS (Cascading Style Sheets) is standardized by the W3C. Similarly to the HTML file, the style sheet is converted into the DOM tree in the HTML analysis unit 13 and is stored in the DOM tree storage unit 22.
If the resources necessary for displaying the page and the DOM tree are prepared, the HTML analysis unit 13 requests the layout unit 16 to make layout. The layout unit 16 decides the layout of the screen based on the DOM tree. The layout unit 16 specifically decides what to be drawn at which coordinate of the Webview display unit 972 with reference to the style sheet in the DOM tree storage unit 22. Next, the result is stored as the layout data in the layout data storage unit 23. FIG. 7 illustrates a specific example of the layout data. As illustrated in FIG. 7, the layout data indicate what to be drawn with which size at which coordinate on the Webview. If the layout is decided, the layout unit 16 requests the drawing unit 17 to perform the drawing. The drawing unit 17 draws the Web page on the Webview display unit 972 based on the layout data stored in the layout data storage unit 23.
If the screen of the Webview display unit 972 is updated, the user recognizes and analyzes the content thereof and preforms the next manipulation (mouse manipulation, touch panel manipulation, keyboard input, or the like) to the Webview display unit 972. The manipulation to the Webview display unit 972 is notified as a manipulation event to the manipulation event evaluation unit 11.
The manipulation event evaluation unit 11 evaluates the type of the notified event or the position on the Webview display unit 972 where the event occurs and selects the to-be-performed process according to the event. For example, in a case where the user clicks on a link on the Webview display unit 972 with the mouse, the transition to the next Web page is started by notifying the URL associated with the link to the request transmission unit 14. In addition, in a case where the user instructs scrolling by rotating the mouse wheel, the manipulation event evaluation unit 11 notifies the scroll width to the layout unit 16 and requests the layout unit to update the layout.
In addition, in the example of the HTML file of FIG. 5, as described above, the onmouseover event handler is set to the three small images in the middle portion. Therefore, when the mouse cursor moves on the Webview display unit 972, the manipulation event evaluation unit 11 evaluates the position thereof. Therefore, in a case where the mouse cursor touches the small image in the higher portion, the script evaluation unit 12 is requested to execute a JavaScript (registered trademark) function setPicture ( ) in the HTML file as the URL of the image as an argument. The script evaluation unit 12 executes the setPicture ( ) and instructs the HTML analysis unit 13 to rewrite an src attribute of the large image in the lower portion in the URL of the image touched with the mouse cursor. The HTML file analysis unit updates the DOM tree according to the instruction from the script evaluation unit 12. FIG. 8 illustrates a result of the updating of the DOM tree in a case where the mouse cursor touches the image (./2.jpg) in the central portion. As illustrated in FIG. 8, the src attribute of the image in the lower portion is rewritten in the URL “./2.jpg” of the touched image. The updating of the DOM tree can be transferred to the layout unit 16 to be reflected on the layout data (namely, in this example, the “image=./1.jpg” of the enlarged image in the lower portion of FIG. 7 is rewritten in the “image=./2.jpg”). Next, the layout unit requests the drawing unit 17 to perform drawing, so that the enlarged image of the touched image (in this example, /2.jpg) is displayed in the lower portion of the Webview display unit 972.
With respect to the manipulation of the Web browser, in order to improve the quality of user experience, a reduction of the response time (flow indicated by a broken arrow of FIG. 9) from the occurrence of the manipulation event to the screen drawing corresponding to the Web screen display is required. For example, in order to remove a frame delay due to the process of the Web browser, in a user terminal drawing 60 frames per second, the response time needs to be suppressed down to 17 milliseconds or less. In addition, according to Jakob Nielsen, if a feeling “directly manipulating” is to be provided to the user, the upper limit of the response time needs to be 100 milliseconds, and if a feeling “controlling” is to be provided to the user, the upper limit of the response time needs to be 1 second (for example, refer to Non-Patent Literature 6). However, in a case where the Rich Internet Application is assumed, since the script or the screen configuration is complicated, in the above-described flow, high load is exerted particularly on the script evaluation unit 12 and the layout unit 16. Furthermore, since the event continuously occurs, the script evaluation unit 12 and the layout unit 16 need to be repeatedly executed. As a result, in a low-spec user terminal, these processing units are bottlenecks in terms of processing performance, so that process-pending events are accumulated. Therefore, there occurs a problem in that the response time is remarkably worsened or the manipulation is ignored.
As a technique for improving the quality of user experience of the Web browsing by utilizing the resources on the network, there is a cache technique typified by CDN (Content Delivery Network) (for example, refer to Patent Literature 1). In the cache technique, the resources which are originally located in the Web server are arranged to be distributed to a cache server on the network. Therefore, by using a DNS (Domain Name Server) or the like, the access of the Web browser 97 to the Web server 96 is guided to a near cache server, so that the cache server is allowed to send a proxy reply with the resources. The cache technique has an effect of reducing the response time from the input of URL to the screen display (flow indicated by a broken arrow of FIG. 10). However, the cache technique does not contribute to reduction of the response time (flow indicated by a broken arrow of FIG. 9) from the occurrence of the manipulation event to the screen display, which is required in a case where the Rich Internet Application is assumed.
In addition, there is a technique of converting a Web page into a light-weighted format in accordance with the type of a user terminal in a network. For example, as a protocol for browsing a Web page from a mobile terminal, there is a WAP (Wireless Application Protocol) (for example, refer to Non-Patent Literature 1). The mobile terminal has a low processing performance of CPU and a small memory capacity, and the connection to the Internet is also unstable. Therefore, in the WAP, first, the Web page is written by using a unique markup language called WML (Wireless Markup Language). In order to reduce process load and a communication amount of the mobile terminal, in a gateway located between a Web server 96 and the mobile terminal, the Web page written by the WML is converted into a binary format and is transmitted to the mobile terminal. In addition, there is Opera Mini of Opera Software ASA as a Web browser for the purpose of more comfortably browsing a normal Web page written by HTML with a less powerful mobile terminal. The Opera Mini re-formats/compresses the Web page in a proxy server on the Internet into a Web page for the mobile terminal and transmits the Web page to the Web browser 97 by using a markup language called OBML (Opera Binary Markup Language).
This format conversion technique reduces a download time due to a reduction in communication amount or reduces process load of the “HTML analysis unit 13” and the “layout unit 16” in a new page transition period. However, according to the occurrence of a manipulation event which is a bottleneck of the Rich Internet Application, re-evaluation of the layout in the script evaluation unit 12 or the layout unit 16 needs to be still performed on the user terminal, and thus, the technique does not contribute to the reduction of the process load.
In addition, as illustrated in FIG. 11, a method of remotely executing a script evaluation unit 12 on a Web server 96 was proposed by Orito (for example, refer to Non-Patent Literature 2). In the proposal by Orito, first, when an HTML file is returned from the Web server 96 to a Web browser 97, a JavaScript (registered trademark) function written in the HTML file is registered in the script evaluation unit 12 installed in the Web server 96. Next, an event handler written in each element in the HTML file is rewritten in a script which remotely executes a JavaScript (registered trademark) function registered in the script evaluation unit 12 on the Web server 96. Accordingly, if the user manipulates the Web browser 97, the rewritten script is executed, and the JavaScript (registered trademark) function constituting a pair on the Web server 96 is evaluated by the script evaluation unit 12 of the Web server 96. The result of script evaluation is returned as an HTML file to the user terminal. The Web browser 97 of the user terminal analyzes the received HTML file and draws the resulting screen.
In the proposal by Orito, there is an advantage in that, in the Web browser 97 of the user terminal, load necessary for script evaluation is reduced. On the other hand, when an event occurs, in the user terminal, a series of processes such as “remote call using a JavaScript (registered trademark), reception of a resulting HTML file, reconstruction of the DOM tree, re-layout and drawing” need to be executed, and thus, the load of the whole user terminal is not necessarily reduced. In addition, due to delay of communication between the user terminal and the Web server, the response time from the occurrence of event to the screen drawing is also increased. As a result, there is a problem in that the technique is difficult to be applied to, particularly, the Rich Internet Application where the manipulation event continuously occurs.